<script setup lang="ts">
import { ref } from 'vue';

import {
  CheckCircleOutlined,
  DeleteOutlined,
  DownloadOutlined,
  EditOutlined,
  LineChartOutlined,
  PlusOutlined,
  SafetyCertificateOutlined,
  UploadOutlined,
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

const showAuthModal = ref(false);

// 访问日志
const accessLogs = ref([
  {
    id: 1,
    timestamp: '2025-01-15 10:30:00',
    action: 'read',
    institution: '北京协和医院',
    dataType: '基因检测报告',
    ipAddress: '192.168.1.100',
  },
  {
    id: 2,
    timestamp: '2025-01-14 15:20:00',
    action: 'write',
    institution: '华大基因',
    dataType: '全基因组数据',
    ipAddress: '10.0.0.50',
  },
  {
    id: 3,
    timestamp: '2025-01-13 09:15:00',
    action: 'read',
    institution: '上海瑞金医院',
    dataType: '遗传病筛查',
    ipAddress: '172.16.0.25',
  },
]);

// 日志表格列
const logColumns = [
  {
    title: '时间',
    dataIndex: 'timestamp',
    key: 'timestamp',
    width: 150,
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 80,
  },
  {
    title: '机构',
    dataIndex: 'institution',
    key: 'institution',
    width: 150,
  },
  {
    title: '数据类型',
    dataIndex: 'dataType',
    key: 'dataType',
    width: 120,
  },
  {
    title: 'IP地址',
    dataIndex: 'ipAddress',
    key: 'ipAddress',
    width: 120,
  },
];

// 健康建议
const healthSuggestions = ref([
  {
    id: 1,
    category: '心血管健康',
    suggestion: '定期体检，尤其关注心血管健康',
    priority: 'high',
  },
  {
    id: 2,
    category: '饮食建议',
    suggestion: '保持健康饮食，控制盐分摄入',
    priority: 'medium',
  },
  {
    id: 3,
    category: '运动建议',
    suggestion: '适度运动，每周至少3次',
    priority: 'medium',
  },
]);

// 隐私设置
const privacySettings = ref({
  allowResearch: false,
  allowInsurance: false,
  allowMedical: true,
  dataRetention: '5年',
  notificationEnabled: true,
});

// 健康风险
const healthRisks = ref([
  {
    id: 1,
    disease: '高血压',
    risk: '中等',
    probability: '35%',
    prevention: '控制饮食，定期监测',
  },
  {
    id: 2,
    disease: '糖尿病',
    risk: '低等',
    probability: '15%',
    prevention: '保持健康体重，适量运动',
  },
]);

// 数据授权列表
const dataAuthorizations = ref([
  {
    id: 1,
    institutionName: '北京协和医院',
    dataType: '基因检测报告',
    status: 'active',
    expirationDate: '2025-12-31',
    accessCount: 5,
  },
  {
    id: 2,
    institutionName: '华大基因',
    dataType: '全基因组数据',
    status: 'active',
    expirationDate: '2025-06-30',
    accessCount: 2,
  },
  {
    id: 3,
    institutionName: '上海瑞金医院',
    dataType: '遗传病筛查',
    status: 'revoked',
    expirationDate: '2024-12-31',
    accessCount: 1,
  },
]);

// 新增授权表单
const newAuth = ref({
  institutionName: '',
  dataType: '',
  duration: '12',
});

// 基因数据上传
const uploadGeneData = () => {
  message.success('基因数据上传成功！');
};

// 生成健康报告
const generateHealthReport = () => {
  message.success('健康报告生成成功！');
};

// 生成继承证明
const generateInheritanceProof = () => {
  message.success('继承证明生成成功！');
};

// 验证证明
const verifyProof = () => {
  message.success('证明验证通过！');
};

// 下载基因数据
const downloadGeneData = () => {
  message.success('基因数据下载成功！');
};

// 更新基因数据
const updateGeneData = () => {
  message.success('基因数据更新成功！');
};

// 删除基因数据
const deleteGeneData = () => {
  message.success('基因数据删除成功！');
};

// 查看授权详情
const viewAuthDetail = (item: any) => {
  message.info(`查看授权详情：${item.institutionName}`);
};

// 撤销授权
const revokeAuth = (item: any) => {
  message.success(`已撤销 ${item.institutionName} 的授权`);
};

// 新增授权
const addAuthorization = () => {
  if (!newAuth.value.institutionName || !newAuth.value.dataType) {
    message.error('请填写完整信息');
    return;
  }

  message.success('授权申请提交成功！');
  showAuthModal.value = false;

  // 重置表单
  newAuth.value = {
    institutionName: '',
    dataType: '',
    duration: '12',
  };
};

// 保存隐私设置
const savePrivacySettings = () => {
  message.success('隐私设置保存成功！');
};
</script>

<template>
  <div class="gene-privacy-page">
    <a-card>
      <template #title>
        <div class="page-header">
          <span>🧬 基因数据与隐私防护</span>
          <a-button type="primary" @click="uploadGeneData">
            <UploadOutlined /> 上传基因数据
          </a-button>
        </div>
      </template>

      <a-row :gutter="16">
        <!-- 基因数据概览 -->
        <a-col :span="8">
          <a-card title="📊 数据概览" size="small">
            <a-statistic title="基因文件数" :value="12" />
            <a-statistic title="存储大小" value="2.5" suffix="GB" />
            <a-statistic title="授权机构" :value="3" />
            <a-statistic title="访问次数" :value="8" />
          </a-card>
        </a-col>

        <!-- 健康风险评估 -->
        <a-col :span="8">
          <a-card title="🏥 健康风险评估" size="small">
            <a-list :data-source="healthRisks" size="small">
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-list-item-meta>
                    <template #title>
                      {{ item.disease }}
                    </template>
                    <template #description>
                      <div>风险等级：{{ item.risk }}</div>
                      <div>患病概率：{{ item.probability }}</div>
                    </template>
                  </a-list-item-meta>
                  <a-tag
                    :color="
                      item.risk === '高等'
                        ? 'red'
                        : item.risk === '中等'
                          ? 'orange'
                          : 'green'
                    "
                  >
                    {{ item.risk }}
                  </a-tag>
                </a-list-item>
              </template>
            </a-list>
          </a-card>
        </a-col>

        <!-- 隐私设置 -->
        <a-col :span="8">
          <a-card title="🔒 隐私设置" size="small">
            <a-form layout="vertical" size="small">
              <a-form-item label="允许研究使用">
                <a-switch v-model:checked="privacySettings.allowResearch" />
              </a-form-item>
              <a-form-item label="允许保险查询">
                <a-switch v-model:checked="privacySettings.allowInsurance" />
              </a-form-item>
              <a-form-item label="允许医疗机构访问">
                <a-switch v-model:checked="privacySettings.allowMedical" />
              </a-form-item>
              <a-form-item label="数据保留期限">
                <a-select
                  v-model:value="privacySettings.dataRetention"
                  size="small"
                >
                  <a-select-option value="1年">1年</a-select-option>
                  <a-select-option value="3年">3年</a-select-option>
                  <a-select-option value="5年">5年</a-select-option>
                  <a-select-option value="永久">永久</a-select-option>
                </a-select>
              </a-form-item>
            </a-form>
            <a-button
              type="primary"
              size="small"
              block
              @click="savePrivacySettings"
            >
              保存设置
            </a-button>
          </a-card>
        </a-col>
      </a-row>

      <a-row :gutter="16" style="margin-top: 16px">
        <!-- 健康建议 -->
        <a-col :span="12">
          <a-card title="💡 个性化健康建议" size="small">
            <h4>健康建议</h4>
            <a-timeline>
              <a-timeline-item color="green">
                定期体检，尤其关注心血管健康
              </a-timeline-item>
              <a-timeline-item color="blue">
                保持健康饮食，控制盐分摄入
              </a-timeline-item>
              <a-timeline-item color="orange">
                适度运动，每周至少3次
              </a-timeline-item>
            </a-timeline>
          </a-card>

          <!-- 数据授权 -->
          <a-card title="🔑 数据授权管理" size="small" style="margin-top: 16px">
            <a-list :data-source="dataAuthorizations" size="small">
              <template #renderItem="{ item }">
                <a-list-item>
                  <template #actions>
                    <a @click="viewAuthDetail(item)">详情</a>
                    <a @click="revokeAuth(item)">撤销</a>
                  </template>
                  <a-list-item-meta>
                    <template #title>
                      {{ item.institutionName }}
                    </template>
                    <template #description>
                      <div>授权类型：{{ item.dataType }}</div>
                      <div>有效期：{{ item.expirationDate }}</div>
                      <div>访问次数：{{ item.accessCount }}次</div>
                    </template>
                  </a-list-item-meta>
                  <a-tag :color="item.status === 'active' ? 'green' : 'gray'">
                    {{ item.status === 'active' ? '生效中' : '已撤销' }}
                  </a-tag>
                </a-list-item>
              </template>
            </a-list>

            <a-button
              type="dashed"
              block
              @click="showAuthModal = true"
              style="margin-top: 12px"
            >
              <PlusOutlined /> 新增授权
            </a-button>
          </a-card>
        </a-col>

        <!-- 访问日志 -->
        <a-col :span="12">
          <a-card title="📋 数据访问日志" size="small">
            <a-table
              :data-source="accessLogs"
              :columns="logColumns"
              size="small"
              :pagination="{ pageSize: 5 }"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'action'">
                  <a-tag :color="record.action === 'read' ? 'blue' : 'orange'">
                    {{ record.action === 'read' ? '读取' : '写入' }}
                  </a-tag>
                </template>
              </template>
            </a-table>
          </a-card>

          <!-- 零知识证明 -->
          <a-card title="🔐 零知识证明" size="small" style="margin-top: 16px">
            <a-space direction="vertical" style="width: 100%">
              <a-button type="primary" @click="generateInheritanceProof">
                <SafetyCertificateOutlined /> 生成继承证明
              </a-button>
              <a-button @click="verifyProof">
                <CheckCircleOutlined /> 验证证明
              </a-button>
              <a-button @click="generateHealthReport">
                <LineChartOutlined /> 生成健康报告
              </a-button>
              <a-button @click="downloadGeneData">
                <DownloadOutlined /> 下载基因数据
              </a-button>
              <a-button danger @click="updateGeneData">
                <EditOutlined /> 更新基因数据
              </a-button>
              <a-button danger @click="deleteGeneData">
                <DeleteOutlined /> 删除基因数据
              </a-button>
            </a-space>
          </a-card>
        </a-col>
      </a-row>
    </a-card>

    <!-- 新增授权Modal -->
    <a-modal
      v-model:open="showAuthModal"
      title="🔑 新增数据授权"
      @ok="addAuthorization"
      @cancel="showAuthModal = false"
    >
      <a-form layout="vertical">
        <a-form-item label="机构名称" required>
          <a-input
            v-model:value="newAuth.institutionName"
            placeholder="请输入机构名称"
          />
        </a-form-item>
        <a-form-item label="数据类型" required>
          <a-select
            v-model:value="newAuth.dataType"
            placeholder="请选择数据类型"
          >
            <a-select-option value="基因检测报告">基因检测报告</a-select-option>
            <a-select-option value="全基因组数据">全基因组数据</a-select-option>
            <a-select-option value="遗传病筛查">遗传病筛查</a-select-option>
            <a-select-option value="健康评估">健康评估</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="授权期限">
          <a-select v-model:value="newAuth.duration">
            <a-select-option value="1">1个月</a-select-option>
            <a-select-option value="6">6个月</a-select-option>
            <a-select-option value="12">1年</a-select-option>
            <a-select-option value="permanent">永久</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style scoped lang="scss">
.gene-privacy-page {
  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  h4 {
    margin: 16px 0 8px;
    color: #1890ff;
  }
}
</style>
